/**
 * 我的授权
 * @author zhangqiang
 * @date   2016/11/15
 */
import {health} from "../const/health";
import {prefix} from "../const/prefix";
import NoData from "../components/NoData";
import PullRefresh from "../components/mui/PullRefresh.js";

(function( lf, r) {
    var api = health.api,
        apiUrl = prefix.oldpeople,
        ajax = lf.utils.ajax,
        RC= r.createClass,
        getUrlParam = lf.utils.getUrlParam,
        doAction = lf.bridgeJs.doAction;

    const TYPE = getUrlParam('type');

    var ListGroup = RC({
        getInitialState: function () {
            return ({
                noData: {
                    span_text: '还没有需要您取消授权的内容',
                },
            });
        },
        render: function () {
            var setList = this.props.data.map(function (data) {
                return (
                    <List data={data}/>
                )
            })
            if (this.props.data.length) {
                return (
                    <div className="list-group" id="listGroup">
                        {setList}
                    </div>
                )
            } else {
                return <NoData data={this.state.noData}/>
            }
        }
    });
    var List = RC({
        render: function () {
            var data = this.props.data,
                fmt = 'yyyy-MM-dd hh:mm',
                reportTime = lf.utils.format(data.createTime, fmt);

                if(data.recipientType == 1){
                    var type = 'among',
                        typeName = '亲友';
                }else if(data.recipientType == 2){
                    var type = 'doctor',
                        typeName = '医生';
                }
                return(
                    <a className="list mui-table-view" href="javascript:;" >
                            <div className={"mui-btn "+(data.recipientType == 1?'text-dot':'hide')} ref="toDetail">取消授权</div>
                        <div className="list-title">
                            <p className="list-text">授权<span className="list-name">{data.recipientName||'无'}</span>查看健康数据
                                <b className={type}>{typeName}</b>
                            </p>
                            <p className="time">{reportTime}</p>
                        </div>

                    </a>
                )
        },

        healthGrant: function(type){
            ajax({
                type: 'post',
                url: apiUrl + api.cancelHealth,
                data: {
                    healthGrantauthId: type+'',
                },
                success: function (data) {
                    if(data.code == '200'){
                        location.reload();
                    }
                }
            })
        },

        componentDidMount: function () {
            r.findDOMNode(this.refs.toDetail).addEventListener('tap', function () {
                let typeId= this.props.data.id
                console.log(typeId)
                this. healthGrant(typeId)
            }.bind(this));
        }
    });

    var Root = r.createClass({
        getInitialState: function () {
            return {
                list: [{
                    reporterName: '',
                    reportTime: '',
                    content: '',
                    houseNum: ''
                }],
                user:'',
                useridGrant: '',
            }
        },

        getList: function (page, shouldAppend) {

            if (!page) page = 1;

            var me = this;
            me.setState({loadingStatus: 'block'});

            console.log(this.state.user.id)
            ajax({
                type: 'get',
                url: apiUrl + api.Recipients,
                data: {
                    staffId:  this.state.user.id,
                    page: page,
                },
                success: function (data) {
                    if(data.dataList.length){
                        me.setState({useridGrant:data.dataList[0].useridGrant,});
                    }
                    if ( data.code == '200' ) {
                        let resultList = data.dataList,
                            maxCount = data.maxCount,
                            appendedList;

                        if(shouldAppend){
                            appendedList = me.state.list
                            $.each(resultList, function (i,item) {
                                appendedList.push(item);
                            });

                            mui('#pullrefresh')
                                .pullRefresh()
                                .endPullupToRefresh((appendedList.length == maxCount)); //refresh completed

                            me.setState({
                                list: appendedList,
                                loadingStatus: 'none',
                            });

                        }
                        else {
                            me.setState({
                                list: resultList,
                                loadingStatus: 'none',
                            });
                        }
                    }
                    else {
                        alert(data.desc);
                    }
                }
            });
        },
        componentWillMount: function () {
            var me = this;

            //TODO 在最外层getUser,参考 approval-list
            lf.appJs.getUser(userInfo => {
                me.setState({user:userInfo});
                me.getList();
                lf.appJs.refresh(() => this.getList());

            });
        },

        componentDidMount: function(){
            var me = this;
            $('.rorward').on('tap',()=>{
                doAction('finger-gave-mobile.html?useridGrant='+me.state.user.id,'授权');
            })

            $('.return').on('tap', function () {
                lf.appJs.doClose();
            });
        },

        render: function () {
            return (
                <div className="report-list">
                    <div className="satnav">
                        <i className="mui-icon mui-icon-arrowleft return"></i>
                        <i className="mui-icon mui-icon-plusempty rorward"></i>
                    </div>
                    <ListGroup data={this.state.list} getList={this.getList}/>
                </div>
            )
        },
        componentWillReceiveProps: function (nextProps) {
            var page = nextProps.page;
            this.getList(page, true)
        }
    });

    var PullRefreshCon = React.createClass({
        getInitialState: function () {
            return {
                page: 1,
            }
        },
        pullupFn: function () {
            var newPage = ++this.state.page;
            this.setState({page: newPage});
        },
        render: function () {
            var me = this;
            return <PullRefresh pullupFn={me.pullupFn}
                                data={<Root page={me.state.page}/>}/>;
        }
    });
    r.render(
        <PullRefreshCon />,
        document.getElementById('root'), function () {
            $('#root').css('background', 'none');
        }
    )
})(liefeng, React)